<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>巡检系统</el-breadcrumb-item>
            <el-breadcrumb-item>巡检任务</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="patrolTask" class="demo-form-inline">
        <el-row>
            <el-col :span="5">
                <el-form-item label="任务编号">
                    <el-input v-model="patrolTask.taskNo" placeholder="请输入编号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="任务名称">
                    <el-input v-model="patrolTask.taskName" placeholder="请输入计划名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="任务类型" label-width="80px">
                    <el-select v-model="patrolTask.taskType" placeholder="请选择">
                        <el-option label="计划任务" value="plan">计划任务</el-option>
                        <el-option label="临时任务" value="temp">临时任务</el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="任务状态" label-width="80px">
                    <el-select v-model="patrolTask.taskStatu" placeholder="请选择">
                        <el-option label="新任务" value="0">新任务</el-option>
                        <el-option label="执行中" value="1">执行中</el-option>
                        <el-option label="等待审核" value="2">等待审核</el-option>
                        <el-option label="已完成" value="3">已完成</el-option>
                        <el-option label="审核通过" value="4">审核通过</el-option>
                        <el-option label="审核不通过" value="5">审核不通过</el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
                <el-form-item label="开始日期">
                    <el-date-picker
                        v-model="patrolTask.startDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="结束日期">
                    <el-date-picker
                        v-model="patrolTask.endDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                 <el-form-item>
                    <el-button type="info" @click="onSubmit">查询</el-button>
                    <el-button @click="clear">清空</el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>

      <!-- 任务列表 -->
      <div class="bbb">
        <el-table class="tab1"
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column type="index" :index="index" label="序号" width=""></el-table-column>
            <el-table-column prop="taskNo" label="任务编号" width=""></el-table-column>
            <el-table-column prop="taskName" label="任务名称" width=""></el-table-column> 
            <el-table-column prop="taskType" label="任务类型" width="">
                <template slot-scope="scope">
                    <span>{{scope.row.taskType=='plan'?'计划任务':'紧急任务'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="taskStatu" label="任务状态" width="">
                <template slot-scope="scope">
                    <span>{{scope.row.taskStatu==0?'新任务':scope.row.taskStatu==1?'执行中':scope.row.taskStatu==2?'等待审核':scope.row.taskStatu==3?'已完成':scope.row.taskStatu==4?'审核通过':'审核不通过'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="executor" label="执行人" width=""></el-table-column>
            <el-table-column prop="startDate" label="开始日期" width=""></el-table-column>
            <el-table-column prop="endDate" label="结束日期" width=""></el-table-column>
            <el-table-column label="巡检点" width="">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="seePoint(scope.row)" round>查看任务巡检点</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="350">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" v-if="scope.row.taskStatu==0" @click="doIt(scope.row)" round>执行</el-button>
                    <el-button type="success" size="mini" v-if="scope.row.taskStatu==1" @click="success(scope.row)" round>完成任务</el-button>
                    <el-button type="info" v-if="scope.row.taskStatu==2" size="mini" disabled round>等待审核...</el-button>
                    <el-button type="success" v-if="scope.row.taskStatu==3 || scope.row.taskStatu==4" size="mini" disabled round>已完成</el-button>
                    <el-button type="danger" v-if="scope.row.taskStatu==5" size="mini" @click="reDoIt(scope.row)" round>重做任务</el-button>
                    <el-button type="success" v-if="scope.row.taskStatu==3 || scope.row.taskStatu==4" size="mini" @click="seeCheckMsg(scope.row)" round>查看审核结果</el-button>
                    <el-button type="danger" v-if="scope.row.taskStatu==5" size="mini" @click="seeCheckMsg(scope.row)" round>查看审核结果</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <el-pagination class="pag"
            layout="prev, pager, next"
            :total="totle"
            :page-size='pageSize'
            @current-change='change'>
        </el-pagination>



        <!-- 完成任务弹框 -->
        <el-dialog title="完成巡检任务" width="30%" :visible.sync="successTaskVisible">
            <el-form :model="successTaskValue" ref="addrul" :rules="addSituation">
            <el-row>
                <el-col>
                <el-form-item label="任务名" label-width="80px">
                    <el-input v-model="successData.taskName" disabled></el-input>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="执行人" label-width="80px">
                    <el-input v-model="successData.executor" disabled></el-input>
                </el-form-item>
            </el-col>
             </el-row>
            
            
   
            <el-row>
                <el-col>
                    <el-form-item label="检测结果" label-width="80px" prop="patResult">
                        <el-input v-model="successTaskValue.patResult" placeholder="请输入检测结果"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            


             

            <el-row>
                <el-col>
                    <el-form-item label="备注" label-width="80px" prop="patExplain">
                        <el-input type="textarea" v-model="successTaskValue.patExplain" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="successTaskVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTaskSuccess('addrul')">完 成</el-button>
            </div>
        </el-dialog>





        <!-- 查看详情框 -->
        <el-dialog title="详情" width="45%" :visible.sync="pointsTaskVisible">
            <el-form>
             <el-row class="row1">
                <el-col :span="21">
                    <span class="span1">巡检点列表:</span>
                </el-col>
            </el-row>


             <el-row>
                <el-col :span="21">
                    <el-table :data="points" tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="pointNo" label="巡检点编号" width="200"></el-table-column>
                        <el-table-column prop="pointName" label="巡检点名称" width="200"></el-table-column>
                        <el-table-column prop="address" label="巡检点地址" width="200"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>

                
            </el-form>
            <div slot="footer" style="text-align:center;" class="dialog-footer">
                <el-button type="primary" style="width:30%" @click="pointsTaskVisible=false">确 定</el-button>
            </div>
        </el-dialog>




        <!-- 查看审核结果框 -->
        <el-dialog title="审核结果" width="25%" :visible.sync="checkMsgVisible">
            <el-form :model="checkMsg">
            <el-row>
                <el-col>
                <el-form-item label="审核结果" label-width="80px">
                    <el-input v-model="checkMsg.ckResult" disabled></el-input>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="审核日期" label-width="80px">
                    <el-input v-model="checkMsg.ckDate" disabled></el-input>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="审核建议" label-width="80px">
                    <el-input type="textarea" v-model="checkMsg.ckAdvice" disabled></el-input>
                </el-form-item>
            </el-col>
             </el-row>

                
            </el-form>
            <div slot="footer" style="text-align:center;" class="dialog-footer">
                <el-button type="primary" style="width:30%" @click="checkMsgVisible=false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            patrolTask:{
                taskNo:'',
                taskName:'',
                taskType:'',
                taskStatu:'',
                startDate:'',
                endDate:'',
            },
            tableData:[],
            totle:50,
            pageSize:5,
            pageIndex:1,

            // 要完成的任务信息
            successData:{},
            successTaskVisible:false,
            // 完成任务数据
            successTaskValue:{
                patResult:'',
                patExplain:'',
                ckAdvice:'',
            },
            // 巡检点列表
            points:[],
            // 巡检点列表框
            pointsTaskVisible:false,


            // 
            checkMsg:{
                ckResult:'',
                ckDate:'',
                ckAdvice:'',
            },

            // 
            checkMsgVisible:false,






            addSituation:{
                patResult:[
                    {required: true, message: '请输入巡检结果', trigger: 'blur'},
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                patExplain:[
                    {required: true, message: '请输入备注', trigger: 'blur'},
                ]
            }

        }
    },

    methods:{
        index(dex){
              return (this.pageIndex-1)*this.pageSize+dex+1;
        },
        onSubmit(){
            this.pageIndex=1;
            this.getTaskList();
        },
        clear(){
            this.patrolTask.taskNo='';
            this.patrolTask.taskName='';
            this.patrolTask.taskType='';
            this.patrolTask.taskStatu='';
            this.patrolTask.startDate='';
            this.patrolTask.endDate='';
        },
        getTaskList(){
            this.axios.post("patrol/taskList?pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,this.patrolTask).then(res=>{
                console.log(res.data.data);
                this.totle=res.data.data.total;
                this.tableData=res.data.data.list;
            })
        },
        change(a){
            console.log(a);
            this.pageIndex=a;
            this.getTaskList();
        },
        // 执行任务
        doIt(row){
            this.axios.get("patrol/doIt?id="+row.id).then(res=>{
                this.$message(res.data.msg)
                this.getTaskList();
            })
        },
        // 完成任务按钮触发
        success(row){
            this.successTaskValue.patResult='',
            this.successTaskValue.patExplain='',
            this.successData=row;
            this.successTaskVisible=true;
        },
        // 完成任务中的 完成按钮触发
        addTaskSuccess(addSituation){

            this.$refs[addSituation].validate((valid) => {
                    if (valid) {
                        this.axios.post("patrol/successTask?tid="+this.successData.id,this.successTaskValue).then(res=>{
                            console.log(res.data);
                            this.successTaskVisible=false;
                            this.$message(res.data.msg);
                            this.getTaskList();
                        })
                    } else {
                        return false;
                    }
                });

            
        },
        // 重新执行任务
        reDoIt(row){
            this.axios.get("patrol/reDoIt?id="+row.id).then(res=>{
                this.$message(res.data.msg)
                this.getTaskList();
            })
        },
        // 查看巡检点信息
        seePoint(row){
            this.axios.get("task/getPoints?id="+row.id).then(res=>{
                this.points=res.data.data;
                this.pointsTaskVisible=true;
            })
        },
        // 查看审核结果
        seeCheckMsg(row){
            this.axios.get("check/getCheck?id="+row.id).then(res=>{
                this.checkMsg.ckResult=res.data.data.ckResult;
                this.checkMsg.ckDate=res.data.data.ckDate;
                this.checkMsg.ckAdvice=res.data.data.ckAdvice;

                this.checkMsgVisible=true;
            })
        }
    },

    created(){
        this.getTaskList();
    }
}
</script>

<style scoped>
    .el-breadcrumb{
      height: 60px;
      line-height: 60px;
      font-size: 17px;
      margin-left: 30px;
  }
  .pag{
      text-align: center;
  }
  .bbb{
      height: 400px;
      width: 1450px;
  }
</style>